import React, { Fragment, useState } from 'react';
import { DotLoading, InfiniteScroll, List, SpinLoading } from 'antd-mobile';
import { sleep } from 'antd-mobile/es/utils/sleep';

import s from '@/pages/Index/index.less';
import c from './index.less';
import { cc } from '@/utils';

let count = 0;
const Record: React.FC = () => {
  const [currentTab, setCurrentTab] = useState<Button>('primary');
  const [data, setData] = useState<string[]>([]);
  const [hasMore, setHasMore] = useState<boolean>(true);


  const mockRequest = async () => {
    if (count >= 5) {
      return [];
    }
    await sleep(2000);
    count++;
    return [
      'A',
      'B',
      'C',
      'D',
      'E',
      'F',
      'G',
      'H',
      'I',
      'J',
      'K',
      'L',
      'M',
      'N',
      'O',
      'P',
      'Q',
    ];
  };


  async function loadMore() {
    const append = await mockRequest();
    setData(val => [...val, ...append]);
    setHasMore(append.length > 0);
  }


  const Loading = () => {
    if (hasMore) {
      return (
        <section className={c.loading_list}>
          <SpinLoading style={{ '--size': '10px' }} />
          <span style={{ marginLeft: '5px' }}>正在加载</span>
          <DotLoading />
        </section>
      );
    } else {
      if (data.length) {
        return (
          <section className={c.finish_list}>
            <span>全部加载完</span>
          </section>
        );
      } else {
        return <img className={c.block_empty} src={require('@/static/record-empty.png')} alt='' />;
      }
    }
  };

  return (
    <Fragment>
      <section className={c.record_wrapper}>
        <section className={s.btn_group}>
          <button
            onClick={() => setCurrentTab('primary')}
            className={cc(currentTab === 'primary' && s.btn_active)}
          >
            初级
          </button>
          <button
            onClick={() => setCurrentTab('middle')}
            className={cc(currentTab === 'middle' && s.btn_active)}
          >
            中级
          </button>
          <button
            onClick={() => setCurrentTab('senior')}
            className={cc(currentTab === 'senior' && s.btn_active)}
          >
            高级
          </button>
        </section>

        <section className={c.block_content}>
          <img src={require('@/static/record-title.png')} className={c.block_title} alt='' />
          <section className={c.block_list}>
            <Fragment>
              <List>
                {data.map((item, index) => (
                  <List.Item
                    className={c.list_item}
                    key={index}
                    prefix={
                      <section className={c.gifts_img}>
                        <img src={require('@/static/ball-bg.png')} alt='' />
                      </section>
                    }
                    description={
                      <section className={c.gifts_info}>
                        <p>1</p>
                        <p>2</p>
                      </section>
                    }
                    extra={
                      <section className={c.gift_time}>
                        <p>2022-04-06 00:00:00</p>
                      </section>
                    }
                  >
                    {item}
                  </List.Item>
                ))}
              </List>
              <InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
                {
                  Loading()
                }
              </InfiniteScroll>
            </Fragment>
          </section>
        </section>
      </section>
    </Fragment>
  );

};

export default Record;
